<script setup>
import {onMounted, ref} from 'vue';
import luckysheet from "luckysheet";
import LuckyExcel from 'luckyexcel'
import {useAnalysetStore} from "@/store/index.ts";
import dayjs from "dayjs";
import AnalyesAPI from "@/api/system/analyes.ts";
import {removeNullSampleSN} from '@/utils/method'
import index from '@/components/analysisSheetComponents/soil/tmpl130/index.vue'

let options = {
  container: "luckysheet", //luckysheet为容器id
  lang: 'zh',
  autoCalculate: true,
  data: [
    {
      "column": 10, // 列数
      "row": 10, // 列数
      "defaultRowHeight": 30, // 自定义行高
      "defaultColWidth": 100, // 自定义列宽
      "celldata": [
        // 初始化表格数据，第一行包含表头
        {"r": 0, "c": 0, "v": "待测物名称",}, // A1
        {"r": 0, "c": 20, "v": "备注",}, // A1
        {"r": 1, "c": 0, "v": "检出限()",}, // A1
        {"r": 2, "c": 0, "v": "样品编号",}, // A1
        {"r": 2, "c": 1, "v": "类型",}, // A1
        {"r": 2, "c": 2, "v": "取样量m(g)",}, // A1
        {"r": 2, "c": 3, "v": "干物质Wdm(%)",}, // A1

        {"r": 2, "c": 4, "v": "稀释倍数f",}, // A1
        {"r": 2, "c": 5, "v": "机读浓度ρ()",}, // A1
        {"r": 2, "c": 6, "v": "样品含量ω()",}, // A1
        {"r": 2, "c": 7, "v": "测定结果",}, // A1

        {"r": 2, "c": 8, "v": "稀释倍数f ",}, // A1
        {"r": 2, "c": 9, "v": "机读浓度ρ( )",}, // A1
        {"r": 2, "c": 10, "v": "样品含量ω( )",}, // A1
        {"r": 2, "c": 11, "v": "测定结果",}, // A1

        {"r": 2, "c": 12, "v": "稀释倍数f  ",}, // A1
        {"r": 2, "c": 13, "v": "机读浓度ρ(  )",}, // A1
        {"r": 2, "c": 14, "v": "样品含量ω(  )",}, // A1
        {"r": 2, "c": 15, "v": "测定结果",}, // A1

        {"r": 2, "c": 16, "v": "稀释倍数f   ",}, // A1
        {"r": 2, "c": 17, "v": "机读浓度ρ(   )",}, // A1
        {"r": 2, "c": 18, "v": "样品含量ω(   )",}, // A1
        {"r": 2, "c": 19, "v": "测定结果",}, // A1
      ], // 初始化数据
      "config": {
        "merge": {
          "0_0": {
            "r": 0, // 起始行
            "c": 0, // 起始列
            "rs": 1, // 跨越的行数
            "cs": 4  // 跨越的列数
          },
          "1_0": {
            "r": 1, // 起始行
            "c": 0, // 起始列
            "rs": 1, // 跨越的行数
            "cs": 4  // 跨越的列数
          },
          "0_4": {
            "r": 0, // 起始行
            "c": 4, // 起始列
            "rs": 1, // 跨越的行数
            "cs": 4  // 跨越的列数
          },
          "0_8": {
            "r": 0, // 起始行
            "c": 8, // 起始列
            "rs": 1, // 跨越的行数
            "cs": 4  // 跨越的列数
          },
          "0_12": {
            "r": 0, // 起始行
            "c": 12, // 起始列
            "rs": 1, // 跨越的行数
            "cs": 4  // 跨越的列数
          },
          "0_16": {
            "r": 0, // 起始行
            "c": 16, // 起始列
            "rs": 1, // 跨越的行数
            "cs": 4  // 跨越的列数
          },
          "0_20": {
            "r": 0, // 起始行
            "c": 15, // 起始列
            "rs": 2, // 跨越的行数
            "cs": 1  // 跨越的列数
          },
          "1_4": {
            "r": 1, // 起始行
            "c": 4, // 起始列
            "rs": 1, // 跨越的行数
            "cs": 4  // 跨越的列数
          },
          "1_8": {
            "r": 1, // 起始行
            "c": 8, // 起始列
            "rs": 1, // 跨越的行数
            "cs": 4  // 跨越的列数
          },
          "1_12": {
            "r": 1, // 起始行
            "c": 12, // 起始列
            "rs": 1, // 跨越的行数
            "cs": 4  // 跨越的列数
          },
          "1_16": {
            "r": 1, // 起始行
            "c": 16, // 起始列
            "rs": 1, // 跨越的行数
            "cs": 4  // 跨越的列数
          },
        }, // 合并单元格
        "columnlen": { // 设置列宽
          "0": 100, // 第一列宽度 100%
          "1": 100, // 第二列宽度 120px
          "2": 100, // 第三列宽度 180px
          "3": 100, // 第四列宽度 100px
          "4": 100, // 第五列宽度 200px
          "5": 100,  // 第六列宽度 100%
          "6": 100,  // 第六列宽度 100%
          "7": 100,  // 第六列宽度 100%
          "8": 100,  // 第六列宽度 100%
          "9": 100,  // 第六列宽度 100%
        }, // 表格列宽
      },
    }
  ],
  showinfobar: false, // 隐藏信息栏
  showtoolbar: true, // 隐藏工具栏
};

const waterForm = ref({
  bdatas:{
    dcwName:[],//待测物名称
    jcx:[],//检出限
    jbhsycd: {
    jbqsyhl: {ypbh1: '', ypbh2: '', ypbh3: '', ypbh4: '', ypbh5: '', ypbh6: '',},
    bzypcdnd: {bzypcdnd1: '', bzypcdnd2: '', bzypcdnd3: '',},
    sfhg: {sfhg1: '', sfhg2: '', sfhg3: ''},
    hsl: {hsl1: '', hsl2: '', hsl3: ''},
  },
    rypz: [
    {
      ry_bzxbybh: '',ry_zbyyxrq: '',ry_yqzbytj: '',ry_drtj: '',
      ry_zjynd: '',ry_yqzjytj: '',ry_drtj2: '',ry_syynd: ''
    },
    {
      ry_bzxbybh: '',ry_zbyyxrq: '',ry_yqzbytj: '',ry_drtj: '',
      ry_zjynd: '',ry_yqzjytj: '',ry_drtj2: '',ry_syynd: ''
    },
    {
      ry_bzxbybh: '',ry_zbyyxrq: '',ry_yqzbytj: '',ry_drtj: '',
      ry_zjynd: '',ry_yqzjytj: '',ry_drtj2: '',ry_syynd: ''
    },
    {
      ry_bzxbybh: '',ry_zbyyxrq: '',ry_yqzbytj: '',ry_drtj: '',
      ry_zjynd: '',ry_yqzjytj: '',ry_drtj2: '',ry_syynd: ''
    },
    {
      ry_bzxbybh: '',ry_zbyyxrq: '',ry_yqzbytj: '',ry_drtj: '',
      ry_zjynd: '',ry_yqzjytj: '',ry_drtj2: '',ry_syynd: ''
    },
    {
      ry_bzxbybh: '',ry_zbyyxrq: '',ry_yqzbytj: '',ry_drtj: '',
      ry_zjynd: '',ry_yqzjytj: '',ry_drtj2: '',ry_syynd: ''
    },
  ],
  jzqxpz: [
    {jz_bzrynd: '', jz_bzryjrl: '', jz_qxnd: '', jz_bz: "",},
    {jz_bzrynd: '', jz_bzryjrl: '', jz_qxnd: '', jz_bz: "",},
    {jz_bzrynd: '', jz_bzryjrl: '', jz_qxnd: '', jz_bz: "",},
    {jz_bzrynd: '', jz_bzryjrl: '', jz_qxnd: '', jz_bz: "",},
    {jz_bzrynd: '', jz_bzryjrl: '', jz_qxnd: '', jz_bz: "",},
    {jz_bzrynd: '', jz_bzryjrl: '', jz_qxnd: '', jz_bz: "",},
  ],
  qxjhdcd: {
    xdpc: {xdpc1: '', xdpc2: '', xdpc3: '',},
    synd: {synd1: '', synd2: '', synd3: '',},
    sfhg: {sfhg1: '', sfhg2: '', sfhg3: ''}
  },
  kbjbycd: {
    yphl: {ypbh1: '', ypbh2: '', ypbh3: '', ypbh4: '', ypbh5: '', ypbh6: '',},
    hsl: {hsl1: '', hsl2: '', hsl3: '',},
    sfhg: {sfhg1: '', sfhg2: '', sfhg3: ''}
  },
  },
  kbycd: {
    yphl: {ypbh1: '', ypbh2: '', ypbh3: ''},
    sfhg: {sfhg1: '', sfhg2: '', sfhg3: ''}
  },
  pxycd: {
    yphl: {ypbh1: '', ypbh2: '', ypbh3: '', ypbh4: '', ypbh5: '', ypbh6: '',},
    xdpc: {xdpc1: '', xdpc2: '', xdpc3: '',},
    sfhg: {sfhg1: '', sfhg2: '', sfhg3: ''}
  },
  cdtj:{},
})
const switchAB = ref(true)
const sheetData = ref('')
const jsonData = ref(null)
const analyseStatusPage = useAnalysetStore()
const record_sn = analyseStatusPage.waterForm.record_sn
const processedData = ref([])
const cdatas = ref([])
const checkDialogVisible = ref(false)
const checkTime = ref('')
// 在组件挂载后初始化 Luckysheet
onMounted(() => {
  // 初始化表格
  luckysheet.create(options);
  // 调用 Luckysheet 内建方法添加行
  //   获取表单信息
  getWaterCapacity()
});

const loadDataFromLocal = () => {
  sheetData.value = luckysheet.getLuckysheetfile();
  options.data = sheetData.value; // 将字符串解析为 JSON
  console.log(options.data)
  const data = options.data[0].data.map(row => {
    return row
        .map(cell => {
          return cell ? {
            field: cell.m || "默认字段",
            value: cell.v || null
          } : null;
        })
        .filter(cell => cell !== null); // 删除 null 值
  });
  console.log(data);
  // 调用函数
  processedData.value = processData(data);
  cdatas.value = removeNullSampleSN(processDate(data))
  console.log(cdatas.value)

  //   调接口拿数据
  AnalyesAPI.addWaterCapacity({
    ...waterForm.value,
    // record_sn: record_sn,
    record_sn: 130,
    // id: analyseStatusPage.waterForm.id,
    task_id: analyseStatusPage.waterForm.taskId,
    configs: sheetData.value,
    add_form_id: analyseStatusPage.waterForm.add_form_id,
    adatas: processedData.value,
    cdatas: cdatas.value,
  }).then(data => {
    console.log('调接口拿数据', data)
    ElMessage.success('保存成功！')
  })
};

// 获取——获取 水质容量A   工作表
const getWaterCapacity = () => {
  let josn = {
    // id: analyseStatusPage.waterForm.id,
    id: 8,
    // record_sn: record_sn,
    record_sn: 130,
  }
  AnalyesAPI.getAnalyseACapacity(josn).then(data => {
    console.log('获取水质容量 A单', data)
    waterForm.value = data
    sheetData.value = data.configs
    options.data = sheetData.value
    luckysheet.create(options);
    processedData.value = data.adatas
  })
}

const processData = (data) => {
  if (!data || data.length < 3) return [];

  // 提取表头信息
  const header1 = data[0].map(item => item.value).filter(value => value !== null);
  const header2 = data[1].map(item => item.value).filter(value => value !== null);
  const header3 = data[2].map(item => item.value).filter(value => value !== null);
  console.log(header1);
  console.log(header2);
  console.log(header3);

  waterForm.value.bdatas.dcwName.push(...header1.slice(1, 6));
  waterForm.value.bdatas.jcx.push(...header2.slice(1, 6));

  // 提取数据行
  const rows = data.slice(3).map(rowData => rowData.map(item => item.value));

  // 构建嵌套结构
  return rows.map(row => {
    const result = header3.slice(0, 22).reduce((acc, key, index) => {
      acc[key] = row[index];
      return acc;
    }, {});
    result[header1[6]] = row[22]; // 额外的字段
    return result;
  });
};

// 剔除样品浓度ω( )
const extractBracketContent = (text) => {
  const match = text.match(/\((.*?)\)/);
  return match ? match[1] : text; // 如果匹配成功，返回括号内的内容，否则返回原文本
};

//处理插件数据
const processDate = (data) => {
  if (!data || data.length < 3) {
    return [];
  }
  // 提取表头信息
  const header1 = data[0].map(item => item.value).filter(value => value !== null);
  const header2 = data[1].map(item => item.value).filter(value => value !== null);
  const header3 = data[2].map(item => item.value).filter(value => value !== null);
  // 提取数据行
  // const row = data[2].map(item => item.value);
  const row = data.slice(3).map(rowData => rowData.map(item => item.value));
  console.log(row)
  // 构建嵌套结构
  const resultArray = [];
  for (let i = 0; i < row.length; i++) {
    const currentRow = row[i];
    const result = {
      sample_sn: currentRow[0] || null,
      type: currentRow[1] || null,
      datas: [
        {
          name: header1[1] || null,
          cdjg: currentRow[7] || null,
          limit_val: header2[1] || null,
          // dw:extractBracketContent(header3[5]),
          dw:extractBracketContent(header3[6])
        },
        {
          name: header1[2] || null,
          cdjg: currentRow[11] || null,
          limit_val: header2[2] || null,
          // dw:extractBracketContent(header3[9]),
          dw:extractBracketContent(header3[10])
        },
        {
          name: header1[3] || null,
          cdjg: currentRow[15] || null,
          limit_val: header2[3] || null,
          // dw:extractBracketContent(header3[13]),
          dw:extractBracketContent(header3[14])
        },
        {
          name: header1[4] || null,
          cdjg: currentRow[19] || null,
          limit_val: header2[4] || null,
          // dw:extractBracketContent(header3[17]),
          dw:extractBracketContent(header3[18])
        },
      ],
    };
    resultArray.push(result);
  }
  return resultArray;
};


// const processData = (data) => {
//   if (!data || data.length < 3) {
//     return [];
//   }

//   // 提取表头信息
//   const header1 = data[0].map(item => item.value).filter(value => value !== null);
//   const header2 = data[1].map(item => item.value).filter(value => value !== null);
//   const header3 = data[2].map(item => item.value).filter(value => value !== null);
//   dcwName.value.push(header1[1], header1[2], header1[3], header1[4])
//   jcx.value.push(header2[0], header2[1], header2[2], header2[3], header2[4])

//   // 提取数据行
//   // const row = data[2].map(item => item.value);
//   const row = data.slice(3).map(rowData => rowData.map(item => item.value));

//   // 构建嵌套结构
//   const resultArray = [];
//   for (let i = 0; i < row.length; i++) {
//     const currentRow = row[i];
//     const result = {
//       [header3[0]]: currentRow[0], // 样品编号
//       [header3[1]]: currentRow[1], // 类型
//       [header3[2]]: currentRow[2], // 类型
//       [header3[3]]: currentRow[3], // 类型
//       [header3[4]]: currentRow[4], // 类型
//       [header3[5]]: currentRow[5], // 类型
//       [header3[6]]: currentRow[6], // 类型
//       [header3[7]]: currentRow[7], // 类型
//       [header3[8]]: currentRow[8], // 类型
//       [header3[9]]: currentRow[9], // 类型
//       [header3[10]]: currentRow[10], // 类型
//       [header3[11]]: currentRow[11], // 类型
//       [header3[12]]: currentRow[12], // 类型
//       [header3[13]]: currentRow[13], // 类型
//       [header3[14]]: currentRow[14], // 类型
//       [header1[5]]: currentRow[15], // 类型
//     };
//     resultArray.push(result);
//   }
//   return resultArray;
// };

// 剔除样品浓度ω( )
// const extractBracketContent = (text) => {
//   const match = text.match(/\((.*?)\)/);
//   return match ? match[1] : text; // 如果匹配成功，返回括号内的内容，否则返回原文本
// };
// const processDate = (data) => {
//   if (!data || data.length < 3) {
//     return [];
//   }
//   // 提取表头信息
//   const header1 = data[0].map(item => item.value).filter(value => value !== null);
//   const header2 = data[1].map(item => item.value).filter(value => value !== null);
//   const header3 = data[2].map(item => item.value).filter(value => value !== null);
//   console.log(header1)
//   console.log(header2)
//   console.log(header3)
//   // 提取数据行
//   // const row = data[2].map(item => item.value);
//   const row = data.slice(3).map(rowData => rowData.map(item => item.value));
//   console.log(row)
//   // 构建嵌套结构
//   const resultArray = [];
//   for (let i = 0; i < row.length; i++) {
//     const currentRow = row[i];
//     const result = {
//       "sample_sn": currentRow[0],
//       [header3[1]]: currentRow[1],
//       [header3[2]]: currentRow[2],
//       "limt_value_unit": extractBracketContent(header2[0]),
//       "dcw1": {
//         "name": header1[1],
//         "limt_value": header2[1],
//         "xsbs": currentRow[3],
//         "value": currentRow[4],
//         "value_unit": extractBracketContent(header3[4]),
//         "yphl": currentRow[5],
//       },
//       "dcw2": {
//         "name": header1[2],
//         "limt_value": header2[2],
//         "xsbs": currentRow[6],
//         "value": currentRow[7],
//         "value_unit": extractBracketContent(header3[7]),
//         "yphl": currentRow[8],
//       },
//       "dcw3": {
//         "name": header1[3],
//         "limt_value": header2[3],
//         "xsbs": currentRow[9],
//         "value": currentRow[10],
//         "value_unit": extractBracketContent(header3[10]),
//         "yphl": currentRow[11],
//       },
//       "dcw4": {
//         "name": header1[4],
//         "limt_value": header2[4],
//         "xsbs": currentRow[12],
//         "value": currentRow[13],
//         "value_unit": extractBracketContent(header3[13]),
//         "yphl": currentRow[14],
//       },
//       'notes': currentRow[15]
//     };
//     resultArray.push(result);
//   }
//   return resultArray;
// };




// 用于获取最新的表格数据
const getUpdatedData = () => {
  checkDialogVisible.value = true
};
const handleCheckClose = () => {
  checkDialogVisible.value = false
}

// 确认提交
const handleSubmit = () => {
  console.log(checkTime.value)
  const formattedDate = checkTime.value ? dayjs(checkTime.value).format('YYYY-MM-DD') : '';
  console.log(formattedDate); // "2025-02-06"
  console.log(analyseStatusPage.waterForm.id)
  AnalyesAPI.handleCheckTimeData({
    id: analyseStatusPage.waterForm.add_form_id,
    submit_date: formattedDate
  }).then(data => {
    if (data === 1) {
      ElMessage.success('提交成功！')
      checkDialogVisible.value = false
    }
  })
}


// 上传文件
const loadExcel = (evt) => {
  const files = evt.target.files
  console.log(files)
  if (files == null || files.length == 0) {
    alert('No files wait for import')
    return
  }
  let name = files[0].name
  let suffixArr = name.split('.'),
      suffix = suffixArr[suffixArr.length - 1]
  if (suffix != 'xlsx') {
    alert('Currently only supports the import of xlsx files')
    return
  }
  LuckyExcel.transformExcelToLucky(files[0], function (exportJson, luckysheetfile) {
    if (exportJson.sheets == null || exportJson.sheets.length == 0) {
      alert('Failed to read the content of the excel file, currently does not support xls files!')
      return
    }
    console.log('exportJson', exportJson.sheets)
    jsonData.value = exportJson

    luckysheet.destroy()
    luckysheet.create({
      container: 'luckysheet', //luckysheet is the container id
      showinfobar: false,
      data: exportJson.sheets,
      title: exportJson.info.name,
      userInfo: exportJson.info.name.creator
    })
  })
}

const handleSwitch = () => {
  switchAB.value = !switchAB.value
}
</script>

<template>
  <div class="card">
    <div v-show="switchAB">
      <el-card class="box-card">
        <h1 style="text-align: center">土壤和沉积物 气相色谱法分析原始记录（二）（A面）</h1>
        <div>SXLPHJ/JL/CX-22-130</div>
        <table class="table">
          <tr>
            <td style="width: 9%;">任务编号</td>
            <td>
              <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                        v-model="waterForm.task_name"/>
            </td>
            <td style="width: 10%;">采样日期</td>
            <td colspan="2">
              <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                        v-model="waterForm.sampling_time"/>
            </td>
            <td>分析日期</td>
            <td colspan="2">
              <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                        v-model="waterForm.anal_time"/>
            </td>
          </tr>
          <tr>
            <td>分析方法</td>
            <td colspan="7">
              <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                        v-model="waterForm.method"/>
            </td>
          </tr>
          <tr>
            <td>分析项目</td>
            <td>
              <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                        v-model="waterForm.bdatas.fxxm"/>
            </td>
            <td>分析仪器</td>
            <td>
              <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                        v-model="waterForm.device_name"/>
            </td>
            <td style="width: 10%;">仪器型号</td>
            <td>
              <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                        v-model="waterForm.device_model"/>
            </td>
            <td>仪器编号</td>
            <td>
              <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                        v-model="waterForm.device_number"/>
            </td>
          </tr>
          <tr>
            <td rowspan="2">测定条件</td>
            <td colspan="5">
              <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                        v-model="waterForm.cdtj.cdtj1"/>
            </td>
            <td>
              环境温度
            </td>
            <td>
              <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                        v-model="waterForm.temperature">
                <template #append>
                  <span style="background-color: transparent;color: black">℃</span>
                </template>
              </el-input>
            </td>

          </tr>
          <tr>
            <td colspan="5">
              <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                        v-model="waterForm.cdtj.cdtj2"/>
            </td>
            <td>环境湿度</td>
            <td>
              <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                        v-model="waterForm.humidity">
                <template #append>
                  <span style="background-color: transparent;color: black">%RH</span>
                </template>
              </el-input>
            </td>
          </tr>
          <tr>
            <td>样品浓缩体积V1(mL)</td>
            <td>
              <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                        v-model="waterForm.ypnstj"/>
            </td>
            <td>计算公式</td>
            <td colspan="5">
              <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                        v-model="waterForm.js_formula"/>
            </td>
          </tr>
          <tr>
            <td>前处理过程</td>
            <td colspan="7">
              <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                        v-model="waterForm.qclgc"/>
            </td>

          </tr>
        </table>
        <!--      <input id="uploadBtn" type="file" @change="loadExcel"/>-->
        <div id="luckysheet" style="width:100%;height:500px;"></div>
        <table class="table">
          <tr>
            <td style="width: 5%;">备注</td>
            <td>
              <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                        v-model="waterForm.notes"/>
            </td>
          </tr>
        </table>
      </el-card>
    </div>
    <div v-show="!switchAB">
      <index :waterForm="waterForm"></index>
    </div>

    <el-card class="box-card" style="margin-top: 30px">
      <div style="display: flex;justify-content: space-between">
        <el-button @click="handleSwitch">
          {{ switchAB ? 'B面' : 'A面' }}
        </el-button>
        <div>
          <el-button>取消</el-button>
          <el-button>新增</el-button>
          <el-button>复制并新增</el-button>
          <el-button @click="loadDataFromLocal">保存</el-button>
          <el-button type="primary" @click="getUpdatedData">提交</el-button>
        </div>
      </div>
    </el-card>
    <!--    提交校核-->
    <el-dialog title="提交校核" v-model="checkDialogVisible" width="30%" center
               :before-close="handleCheckClose">
      <div class="check">
        <!--        头部-->
        <div class="check-header" style="display: flex;align-items: center;margin-bottom: 20px">
          表单填写日期：
          <el-date-picker
              style="border: 1px solid #cccccc;border-radius: 6px;width: 80%;"
              type="date"
              placeholder="请选择"
              v-model="checkTime"
          />
        </div>
        <div class="check-footer">
          <el-button style="width: 48%;" @click="handleCheckClose">取消</el-button>
          <el-button type="primary" style="width: 48%;" @click="handleSubmit">确认</el-button>
        </div>
      </div>
    </el-dialog>
  </div>

</template>

<style scoped>
.card {
  padding: 20px 25px;
}

.table {
  width: 100%;
  border-collapse: collapse;
  /* 表格边框合并 */
  text-align: left;
  /* 默认左对齐 */
  font-size: 14px;
  /* 字体大小 */
  color: #606266;
  /* 默认字体颜色 */
  margin-bottom: 20px;
}

.table th,
.table td {
  border: 1px solid #c2bfbf;
  /* 表格单元格边框颜色 */
  padding: 12px;
  /* 单元格内边距 */
}

.table th {
  background: #f5f7fa;
  /* 表头背景色 */
  font-weight: 600;
  /* 表头字体加粗 */
  color: #303133;
  /* 表头字体颜色 */
  text-align: center;
  /* 表头居中 */
}

.table td {
  width: 15%;
}

.table-td {
  display: flex;
}

::v-deep .el-input__wrapper {
  background-color: transparent;
  box-shadow: none;
}

::v-deep .el-select__wrapper {
  background-color: transparent;
  box-shadow: none;
}

::v-deep .el-input-group__append {
  background-color: transparent;
  box-shadow: none;
}
</style>
